<template>
    <div class="box" v-if="announcementList!=undefined">
        <van-swipe :autoplay="3000" :show-indicators="false" class="swiper" :vertical="true" :touchable='false'>
            <van-swipe-item v-for="(value,index) of announcementList" :key="index" @click.native="ha(value.id)">
                <span class="tit">{{value.title}}<span>{{value.type}}</span></span>
                <span class="swiper_con">{{value.desc}}</span>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
    export default{
        name:'announcement',
        props:['announcementList'],
        data(){
            return{
                a:''
            }
        },
        methods:{
            async ha(val){
                let a=await this.$axios('https://wx.zhaowea.com/api/other/get-notice',{params:{'notice_id':val}})
                this.$store.dispatch('setAnnouncementData',a.data.data.content);
                this.$router.push('announcementList')             
            }
        }
    }
</script>
<style scoped>
    .box{
        display: flex;
        /* justify-content: center; */
        align-items: center;
        font-size: 12px;
        margin:20px 15px;
        height: 30px;
    }
    .tit>span{
        background: rgb(221, 69, 69);
        margin-left: 5px;
        border-radius: 5px;
        padding:2px;
        color:#fff;
    }
    .tit{margin-right:15px;}
    .swiper{
        margin-left:5px; 
        width: 280px;
        height:100%;
    }
    .swiper_con{
        height: 100%;
        line-height: 30px;
    }
</style>